<template>
    <div class="app-container">
        <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
            label-width="120px">
            <h2 style="text-align: center"></h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="8">
                    <el-form-item label="文件名称" prop="fileName">
                        <el-select @change="changeFileName" v-model="formData.fileName" filterable placeholder="请选择文件名称"
                            value-key="fileManagerId" clearable :style="{ width: '100%' }">
                            <el-option v-for="item in dataList" :key="item.fileManagerId" :label="item.fileName"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="受控编号" prop="fileCode">
                        <el-input :disabled="true" v-model="formData.fileCode" placeholder="请输入受控编号" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="记录编号" prop="fileBindCode">
                        <el-input v-model="formData.fileBindCode"  placeholder="请输入记录编号" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="页数" prop="numValue">
                        <el-select v-model="formData.numValue" placeholder="请选择页数" clearable :style="{ width: '100%' }">
                            <el-option v-for="dict in dict.type.sys_number_pages" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="打印方式" prop="printStyleValue">
                        <el-select ref="fileStatus" v-model="formData.printStyleValue" placeholder="请选择打印方式" clearable
                            :style="{ width: '100%' }">
                            <el-option v-for="dict in dict.type.sys_printing_method" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="胶状方向" prop="clueDirectionValue">
                        <el-select ref="fileStatus" v-model="formData.clueDirectionValue" placeholder="请选择胶状方向" clearable
                            :style="{ width: '100%' }">
                            <el-option v-for="dict in dict.type.sys_gelatinous_direction" :key="dict.value"
                                :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="装订日期" prop="bindTime">
                        <el-date-picker v-model="formData.bindTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择装订日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="领用日期" prop="receiveTime">
                        <el-date-picker v-model="formData.receiveTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择领用日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col> -->
            </el-row>
            <el-col :span="24">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
  
<script>
import {
    // fileManagerAdd,
    updategFileManager,
    fileManagerInfo,
    selectList
} from "@/api/system/fileManager.js";
import { listSelect } from "@/api/business/project.js";
import { selectUser, deptTreeSelect } from "@/api/system/user";
import { fileBindRecordAdd, getCode,fileBindRecordInfo } from '@/api/system/bindingRecord.js'
export default {
    components: {},
    dicts: ["sys_number_pages", "sys_gelatinous_direction", 'sys_printing_method'],

    props: [],
    data() {
        return {
            userList: [],
            deptName: "",
            deptProps: {
                children: "children",
                label: "label",
            },
            userData: {
                title: "",
                type: "",
                open: false,
            },
            deptOptions: [],
            userLoading: false,
            queryParams1: {
                deptId: undefined,
            },
            nextUser: [],
            userMultipleSelection: [],
            dataList: [],
            projectList: [],
            formData: {
                isRel: "0",
                projectId: undefined,
                fileCode: undefined,
                userId: undefined,
                fileTypeValue: undefined,
                fileName: undefined,
                fileStatusValue: [],
                isApplyValue: undefined,
                endDate: null,
                startDate: null,
                keyword: "",
                isShow: 0,
                isRecommend: 0
            },
            rules: {
                // fileCode: [
                //     {
                //         required: true,
                //         message: "请输入受控编号",
                //         trigger: "blur",
                //     },
                // ],
                // fileBindCode: [
                //     {
                //         required: true,
                //         message: "请输入记录编号",
                //         trigger: "change",
                //     },
                // ],
                // numValue: [
                //     {
                //         required: true,
                //         message: "请选择页数",
                //         trigger: "change",
                //     },
                // ],
                fileName: [
                    {
                        required: true,
                        message: "请输入文件名称",
                        trigger: "blur",
                    },
                ],
                // printStyleValue: [
                //     {
                //         required: true,
                //         message: "请选择打印方式",
                //         trigger: "change",
                //     },
                // ],
                // clueDirectionValue: [
                //     {
                //         required: true,
                //         message: "请选择胶状方向",
                //         trigger: "change",
                //     },
                // ],
                // bindTime: [
                //     {
                //         required: false,
                //         message: "请选择装订时间",
                //         trigger: "change",
                //     },
                // ],
                // receiveTime: [
                //     {
                //         required: true,
                //         message: "请选择领用时间",
                //         trigger: "change",
                //     },
                // ],
            },
        };
    },
    computed: {},
    watch: {},
    created() {
        this.listSelect();
        if (this.$route.query.isEdit || this.$route.query.isInfo) {
            this.getinfo();
        }
        this.getList()
        // this.getCode()
    },
    mounted() { },
    methods: {
        listSelect() {
            listSelect().then((response) => {
                this.projectList = response.data;
            });
        },
        getList() {
            this.loading = true;
            selectList( ).then((response) => {
                this.dataList = response.data;
                this.formData.bindTime = this.parseTime(new Date().getTime(), "{y}-{m}-{d}")
                // this.formData.receiveTime = this.parseTime(new Date().getTime(),"{y}-{m}-{d}" )

                // this.queryParams.fileStatusValue =
                //     this.queryParams.fileStatusValue.split(",");
                // this.queryParams.fileTypeValue =
                //     this.queryParams.fileTypeValue.split(",");

            });
        },
        getCode(e) {
            getCode({fileId:e}).then((res) => {
                if (res.code == 200) {
                    this.$set(this.formData, 'fileBindCode', res.msg)
                    console.log(this.formData.fileBindCode);
                }
            })
        },

        changeFileName(e) {
            console.log(e);
            // this.dataList.map
            this.formData.fileCode = e.fileCode
            this.formData.fileName = e.fileName
            this.formData.fileManagerId = e.fileManagerId
            this.$forceUpdate()
            this.getCode(this.formData.fileManagerId)
            console.log(new Date().getTime());
            console.log(new Date().toDateString());
            console.log(this.parseTime(
                new Date().getTime(),
                "{y}-{m}-{d}"
            ));
        },
        getinfo() {
            fileBindRecordInfo(this.$route.query.id).then((response) => {
                this.formData = response.data;
                this.formData.fileStatusValue =
                    this.formData.fileStatusValue.split(",");
                if (this.formData.redDocVos) {
                    let u = this.formData.redDocVos.map((item) => {
                        return {
                            nickName: item.nickName,
                            userId: item.isRelUserId,
                        };
                    });
                    this.nextUser = u;
                    this.userMultipleSelection = this.nextUser;
                } else {
                    this.nextUser = [];
                    this.userMultipleSelection = this.nextUser;
                }
            });
        },

        submitForm() {
            if (this.formData.isRel == 1 && this.nextUser.length == 0) {
                this.$modal.msgWarning("请选择关联员工");
                return;
            } else if (this.formData.isRel == 1 && this.nextUser.length != 0) {
                this.formData.redDocVos = this.nextUser.map((item) => {
                    return { isRelUserId: item.userId };
                });
            }
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    if(this.formData.fileBindCode.length !=15){
                        this.$modal.msgWarning('请输入正确的记录编号！')
                        return
                    }
                    let query = JSON.parse(JSON.stringify(this.formData));
                    query.numLabel = this.dict.type.sys_number_pages.find(
                        (i) => i.value === query.numValue
                    ).label;
                    query.printStyleLabel = this.dict.type.sys_printing_method.find(
                        (i) => i.value === query.printStyleValue
                    ).label;
                    query.clueDirectionLabel = this.dict.type.sys_gelatinous_direction.find(
                        (i) => i.value === query.clueDirectionValue
                    ).label;
                    // if (this.formData.fileManagerId != undefined) {
                    //     updategFileManager(query).then((response) => {
                    //         this.$modal.msgSuccess("修改成功");
                    //         this.resetForm();
                    //     });
                    // } else {

                    // }
                    fileBindRecordAdd(query).then((response) => {
                        this.$modal.msgSuccess("新增成功");
                        this.resetForm();
                    });
                }
            });
        },
        resetForm() {
            const obj = { path: "./bindingRecord" };
            this.$tab.closeOpenPage(obj);
        },
    },
};
</script>
<style scoped lang="scss">
.button-new-tag {
    margin-left: 10px;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.upload-file-uploader {
    margin-bottom: 5px;
}

.upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
}

.upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
}

.ele-upload-list__item-content-action .el-link {
    margin-right: 10px;
}
</style>
  